<template>
  <div class="container">
    <!-- 轮播图 -->
    <div class="index-swiper" v-swiper:indexSwiper="indexSwiperOption">
      <div class="swiper-wrapper">
        <div
          class="swiper-slide"
          v-for="(item, index) in bannerData"
          :key="index"
        >
          <div class="swiper-box">
            <img
              :src="$store.state.isMobile ? item.wap_thumb : item.thumb"
              alt=""
              class="banner-swiper"
              v-if="item.thumb"
            />
            <video
              width="100%"
              height="100%"
              controls="false"
              muted
              loop
              autoplay
              :src="item.video"
              v-if="item.video"
            ></video>
            <div class="text-box animated fadeInUp" v-show="index == aniIndex">
              <p
                class="info"
                :style="{
                  color: item.desc_color,
                  fontSize: item.desc_size + 'rem',
                }"
              >
                {{ item.desc }}
              </p>
              <p
                class="title"
                :style="{
                  color: item.title_color,
                  fontSize: item.title_size + 'rem',
                }"
              >
                {{ item.title }}
              </p>
              <el-button
                type="primary"
                class="btn-more"
                :style="{
                  color: item.title_color,
                  border: '1px solid' + item.title_color,
                }"
                @click="openUrl(item.url)"
              >
                {{ $t("了解更多") }}
                <i class="el-icon-arrow-right"></i>
              </el-button>
              <el-button
                type="primary"
                class="btn-more-mobile"
                :style="{
                  color: item.title_color,
                  border: '1px solid' + item.title_color,
                }"
                @click="openUrl(item.url)"
              >
                • {{ $t("了解更多") }}
              </el-button>
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
    <!-- 内容开始 -->
    <div class="c_content">
      <div class="c_title">{{ $t("全品系列") }}</div>
      <el-row :gutter="20" class="item1">
        <el-col :span="12" v-for="item in ListData" :key="item.id">
          <div class="c_type">
            <img
              class="c_type_img"
              :src="item.thumb"
              alt=""
              @click.stop="
                $router.push({
                  path: $i18n.path('chanpinluodi'),
                  query: { id: item.id },
                })
              "
            />
            <div class="c_typeview">
              <div
                class="c_f3"
                :style="{
                  color: item.title_color,
                  fontSize: item.title_size + 'rem',
                }"
              >
                {{ item.title }}
              </div>
              <div
                class="c_f4"
                :style="{
                  color: item.info_color,
                  fontSize: item.info_size + 'rem',
                }"
              >
                {{ item.info }}
              </div>
              <NuxtLink
                class="c_a"
                :style="{
                  color: item.info_color,
                  fontSize: item.info_size + 'rem',
                }"
                :to="{
                  path: $i18n.path('chanpinluodi'),
                  query: { id: item.id },
                }"
                exact
              >
                {{ $t("了解更多") }}>
              </NuxtLink>
            </div>
          </div>
        </el-col>
      </el-row>
      <div class="item2" v-swiper:productSwiperItem="productSwiperOptionItem2">
        <div class="swiper-wrapper">
          <div
            class="swiper-slide"
            :style="{
              background: `url('${item.wap_thumb}') no-repeat`,
              backgroundSize: 'cover',
              backgroundPosition: 'center',
            }"
            v-for="(item, index) in ListData"
            :key="item.id"
            @click.stop="
              $router.push({
                path: $i18n.path('chanpinluodi'),
                query: { id: item.id },
              })
            "
          >
            <div class="item2-text-box">
              <p
                class="name animated fadeInDown"
                v-show="index == aniItem2Index"
              >
                {{ item.title }}
              </p>
              <p
                class="info animated fadeInUp"
                v-show="index == aniItem2Index"
                :style="{
                  color: item.info_color,
                  fontSize: item.info_size + 'px',
                }"
              >
                {{ item.info }}
              </p>
              <p
                class="more animated fadeInUp"
                v-show="index == aniItem2Index"
                :style="{
                  color: item.info_color,
                  fontSize: item.info_size - 6 + 'px',
                }"
              >
                {{ $t("了解更多") }} <i class="el-icon-arrow-right"></i>
              </p>
            </div>
          </div>
        </div>
        <div class="swiper-pagination"></div>
      </div>
      <!-- 核心技术 -->
      <div class="c_hexin">
        <div
          class="c_title technology-title"
          :style="{ color: aniTechnologyIndex == 1 ? '#000' : '' }"
        >
          {{ $t("核心技术") }}
        </div>
        <div
          class="technology-swiper"
          v-swiper:technologySwiper="technologySwiperOption"
        >
          <div class="swiper-wrapper">
            <div
              class="swiper-slide"
              v-for="(item, index) in TechnologyData"
              :key="index"
              @click.stop="
                $router.push({
                  path: $i18n.path('aboutUs'),
                  query: { tabs: 1, id: item.id },
                })
              "
            >
              <div
                class="swiper-box"
                :style="{
                  background: 'url(' + item.thumb + ') no-repeat',
                  backgroundSize: 'cover',
                  backgroundPosition: 'center',
                  fontSize: item.title_size + 'rem',
                  color: item.title_color,
                }"
              >
                {{ item.show == 1 ? item.title : "" }}
              </div>
            </div>
          </div>
          <div class="swiper-pagination"></div>
        </div>
        <div
          class="technology-swiper-mobile"
          v-swiper:technologyMobileSwiper="technologyMobileSwiperOption"
        >
          <div class="swiper-wrapper">
            <div
              class="swiper-slide"
              v-for="(item, index) in TechnologyData"
              :key="index"
              @click.stop="
                $router.push({
                  path: $i18n.path('aboutUs'),
                  query: { tabs: 1, id: item.id },
                })
              "
            >
              <p
                class="text animated fadeInUp"
                v-show="index == aniTechnologyIndex"
                :style="{
                  fontSize: item.title_size + 'rem',
                  color: item.title_color,
                }"
              >
                {{ item.show == 1 ? item.title : "" }}
              </p>
              <img
                class="image"
                :src="$store.state.isMobile ? item.wap_thumb : item.thumb"
                alt=""
              />
            </div>
          </div>
          <div class="swiper-pagination"></div>
        </div>
      </div>
      <!-- 产品中心 -->
      <div class="c_hexin productCenter" v-if="GoodsData.length != 0">
        <div class="c_title">{{ $t("产品中心") }}</div>
        <div class="c_videobox">
          <video
            ref="myVideo"
            class="c_video"
            :controls="true"
            src="https://admin.eprosmartlife.com/upload/20220902/02e81ef096962df61e40ce1638d526e0.mp4"
          ></video>
          <div
            class="c_product"
            @click="
              $router.push({
                path: $i18n.path('productDetail/' + GoodsData[0].id),
              })
            "
          >
            <img class="c_productimg" :src="GoodsData[0].thumb" alt="" />
            <el-tooltip
              effect="dark"
              :content="GoodsData[0].title"
              placement="top"
            >
              <div class="c_f5">{{ GoodsData[0].title }}</div>
            </el-tooltip>
          </div>
        </div>
        <div
          class="product-swiper"
          v-swiper:productSwiper="productSwiperOption"
        >
          <div class="swiper-wrapper">
            <div
              class="swiper-slide"
              v-for="(item, index) in GoodsData"
              :key="item.id"
              @click.stop="
                $router.push({
                  path: $i18n.path('productDetail/' + item.id),
                })
              "
              v-show="index != 0"
            >
              <div class="product-box">
                <img class="product-img" :src="item.thumb" alt="" />
                <el-tooltip effect="dark" :content="item.title" placement="top">
                  <p class="product-name">{{ item.title }}</p>
                </el-tooltip>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="product-moblie" v-if="GoodsData.length != 0">
        <div class="c_videobox">
          <img class="back-img" src="~/assets/images/moblie.png" alt="" />
          <img
            @click="playVideo"
            class="play-img"
            src="~/assets/images/play.png"
            alt=""
          />
          <video
            v-if="isVideo"
            ref="myVideo"
            class="c_video animated"
            :class="aniClass"
            :controls="true"
            autoplay
            src="https://admin.eprosmartlife.com/upload/20220902/02e81ef096962df61e40ce1638d526e0.mp4"
          ></video>
          <i
            v-show="isVideo"
            :class="aniClass"
            @click="playVideo"
            id="video-close"
            class="el-icon-close animated"
          ></i>
        </div>
        <div
          class="product-swiper"
          v-swiper:productSwiperMoblie="productMoblieSwiperOption"
        >
          <div class="swiper-wrapper">
            <div
              class="swiper-slide"
              v-for="item in GoodsData"
              :key="item.id"
              @click.stop="
                $router.push({
                  path: $i18n.path('productDetail/' + item.id),
                })
              "
            >
              <div class="product-box">
                <img class="product-img" :src="item.thumb" alt="" />
              </div>
              <p class="product-name">{{ item.title }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 商城 -->
    <div class="c_shop" v-if="LinkData.length != 0">
      <div
        class="c_shopchild"
        :style="{ borderLeft: index != 0 ? '1px solid #cdcdcd' : '' }"
        v-for="(item, index) in LinkData"
        :key="item.id"
        @click="openUrl(item.url)"
      >
        <img class="c_shopchildimg" :src="item.thumb" alt="" />
        <div class="c_f6">{{ item.title }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    let that = this;
    return {
      indexSwiperOption: {
        //顶部轮播图
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
          type: "bullets",
        },
        loop: false,
        autoplay: {
          delay: 5000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
        slidesPerView: 1,
        spaceBetween: 0,
        speed: 800,
        on: {
          slideChangeTransitionEnd: function () {
            // console.log(this.realIndex, "this");
            that.aniIndex =
              this.activeIndex > that.bannerData.length ? 0 : this.realIndex;
          },
        },
      },
      aniIndex: 0,
      technologySwiperOption: {
        //核心技术滚动图
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
          type: "bullets",
        },
        loop: false,
        autoplay: false,
        slidesPerView: 1,
        spaceBetween: 0,
      },
      technologyMobileSwiperOption: {
        //核心技术移动端滚动图
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
          type: "bullets",
        },
        loop: false,
        autoplay: false,
        slidesPerView: 1,
        spaceBetween: 0,
        on: {
          slideChangeTransitionEnd: function () {
            // console.log(this.realIndex, "this");
            that.aniTechnologyIndex =
              this.activeIndex > that.TechnologyData.length
                ? 0
                : this.realIndex;
          },
        },
      },
      aniTechnologyIndex: 0,
      productSwiperOptionItem2: {
        //移动端四个大分类卡片滚动
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
          type: "bullets",
        },
        loop: false,
        autoplay: false,
        spaceBetween: 0,
        slidesPerView: 1,
        on: {
          slideChangeTransitionEnd: function () {
            // console.log(this.realIndex, "this");
            that.aniItem2Index =
              this.activeIndex > that.ListData.length ? 0 : this.realIndex;
          },
        },
      },
      aniItem2Index: 0,
      productSwiperOption: {
        //PC端底部产品滚动
        loop: false,
        autoplay: false,
        slidesPerView: 3,
        spaceBetween: 40,
      },
      productMoblieSwiperOption: {
        //移动端底部产品滚动
        loop: false,
        autoplay: false,
        slidesPerView: "auto",
        centeredSlidesBounds: true,
        centeredSlides: true,
        spaceBetween: 7,
        initialSlide: 1,
      },
      isVideo: false,
      aniClass: "fadeInUp",
    };
  },
  async asyncData({ $indexApi }) {
    const bannerData = await $indexApi.getBannerData({ position: "home" });
    const listData = await $indexApi.getcategoryList();
    const technologyData = await $indexApi.getTechnologyData();
    const goodsData = await $indexApi.getGoodsData();
    const linkData = await $indexApi.getLinkData();
    // console.log(listData.data, "输出测试");

    bannerData.data.forEach((el) => {
      if (el.thumb.substring(el.thumb.length - 3) == "mp4") {
        el.video = el.thumb;
        delete el.thumb;
      }
    });

    return {
      bannerData: bannerData.data,
      ListData: listData.data,
      TechnologyData: technologyData.data,
      GoodsData: goodsData.data,
      LinkData: linkData.data,
    };
  },
  methods: {
    openUrl(url) {
      window.open(url, "_blank");
    },
    playVideo() {
      if (this.isVideo) {
        this.aniClass = "fadeOutUp";
        setTimeout(() => {
          this.isVideo = false;
          this.aniClass = "fadeInUp";
        }, 500);
      } else {
        this.isVideo = true;
        setTimeout(() => {
          this.aniClass = "";
        }, 500);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.index-swiper {
  width: 100%;

  :deep(.swiper-pagination-bullet) {
    width: 120rem;
    height: 3rem;
    border-radius: 2rem;
    background: #848e94;
    margin: 0 49rem;
  }
  :deep(.swiper-pagination-bullet-active) {
    background: #fff;
  }
  .swiper-pagination {
    width: 100%;
    bottom: 45rem;
  }

  .swiper-box {
    width: 100%;
    height: 800rem;
    overflow: hidden;
    position: relative;

    .banner-swiper {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .text-box {
      position: absolute;
      top: 250rem;
      left: 232rem;
      .info {
        font-size: 30rem;
        font-family: Source Han Sans CN;
        font-weight: 300;
        color: #333333;
        margin: 0;
      }
      .title {
        font-size: 60rem;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #333333;
        margin: 0;
        margin-top: 30rem;
      }
      .btn-more {
        background: transparent;
        border-radius: 6rem;
        font-size: 20rem;
        padding: 12rem 18rem;
        font-family: Source Han Sans CN;
        font-weight: 300;
        border: none;
        margin-top: 30rem;
        transition: 0.6s;
        &:hover {
          background: rgba(255, 255, 255, 0.8);
        }
      }
      .btn-more-mobile {
        display: none;
      }
    }
  }
}
.c_content {
  padding: 40rem 100rem;
  .item2 {
    display: none;
  }
  .c_type {
    width: 100%;
    height: 450rem;
    position: relative;
    margin-bottom: 20rem;
    border-radius: 20rem;
    overflow: hidden;
    &:hover {
      .c_type_img {
        transform: scale(1.2);
      }
    }

    .c_type_img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: 0.6s;
      cursor: pointer;
    }
    .c_typeview {
      position: absolute;
      top: 0;
      left: 100rem;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .c_f3 {
        font-size: 40rem;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #333333;
      }
      .c_f4 {
        font-size: 20rem;
        font-family: Source Han Sans CN;
        font-weight: 300;
        color: #333333;
        margin: 19rem 0 33rem 0;
      }
      .c_a {
        font-size: 20rem;
        font-family: Source Han Sans CN;
        font-weight: 300;
        color: #333333;
      }
      .c_a:hover {
        font-size: 20rem;
        font-family: Source Han Sans CN;
        font-weight: 300;
        color: #2ca2f1 !important;
        text-decoration: underline;
      }
    }
  }
  .c_title {
    font-size: 54rem;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #333333;
    margin: 80rem 0 56rem 0;
    text-align: center;
  }
  .c_hexin {
    .technology-swiper {
      margin-top: 56rem;
      border-radius: 20rem;
      width: 100%;
      .swiper-slide {
        cursor: pointer;
        overflow: hidden;
        border-radius: 20rem;
      }
      :deep(.swiper-pagination-bullet) {
        width: 120rem;
        height: 3rem;
        border-radius: 2rem;
        background: #848e94;
        margin: 0 49rem;
      }
      :deep(.swiper-pagination-bullet-active) {
        background: #fff;
      }
      .swiper-pagination {
        width: 100%;
        bottom: 45rem;
      }
      .swiper-box {
        height: 700rem;
        display: flex;
        align-items: center;
        padding-left: 300rem;
      }
    }
    .technology-swiper-mobile {
      display: none;
    }
  }
  .productCenter {
    margin-top: 10rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    .c_videobox {
      width: 100%;
      height: 560rem;
      display: flex;
      justify-content: space-between;
      .c_video {
        width: 1133rem;
        height: 100%;
        border-radius: 10rem;
      }

      .c_product {
        width: 546rem;
        height: 100%;
        background: #f2f2f2;
        border-radius: 20rem;
        cursor: pointer;
        overflow: hidden;

        &:hover {
          .c_productimg {
            transform: scale(1.2);
          }
        }
        .c_productimg {
          width: 100%;
          height: 460rem;
          transition: 0.6s;
        }
        .c_f5 {
          font-size: 30rem;
          line-height: 60rem;
          font-family: Source Han Sans CN;
          color: #333333;
          text-align: center;
          margin-top: 20rem;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
    .product-swiper {
      width: 100%;
      margin-top: 20rem;

      .swiper-slide {
        width: 31.5%;
        margin-right: 40rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 32rem;
        cursor: pointer;

        &:hover {
          .product-img {
            transform: scale(1.2);
          }
        }

        .product-box {
          width: 546rem;
          height: 500rem;
          background: #f2f2f2;
          border-radius: 20rem;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 20rem;
          .product-img {
            width: 400rem;
            height: 400rem;
            transition: 0.6s;
          }
          .product-name {
            font-size: 30rem;
            font-family: Source Han Sans CN;
            color: #333333;
            margin: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }
}
.product-moblie {
  display: none;
}
.c_shop {
  margin-top: 100rem;
  width: 100%;
  height: 450rem;
  background: #f2f2f2;
  display: flex;
  align-items: center;
  justify-content: center;
  .c_shopchild {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 170rem;
    cursor: pointer;
    &:hover {
      .c_shopchildimg {
        transform: scale(1.2);
        transition: 0.6s;
      }
    }
    .c_shopchildimg {
      width: 82rem;
      height: 82rem;
      margin-bottom: 20px;
      transition: 0.6s;
    }
    .c_f6 {
      font-size: 28rem;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #333333;
    }
  }
}
@media (max-width: 900px) {
  .index-swiper {
    :deep(.swiper-pagination-bullet) {
      width: 21px;
      height: 1px;
      background: #606568;
      border-radius: 0px;
      margin: 0 18px;
    }
    :deep(.swiper-pagination-bullet-active) {
      background: #fff;
    }
    .swiper-pagination {
      bottom: 20px;
    }

    .swiper-box {
      // height: 300px;
      height: auto;

      .banner-swiper {
        width: 100%;
        height: 750px;
        object-fit: cover;
      }
      .text-box {
        position: absolute;
        top: 20%;
        left: 0;
        right: 0;
        margin: 0 auto;
        // border: 1px solid;
        text-align: center;
        .info {
          font-size: 26px !important;
        }
        .title {
          font-size: 21px !important;
          margin: 15px 0;
        }
        .btn-more {
          display: none;
        }
        .btn-more-mobile {
          display: inline-block;
          width: 105px;
          height: 35px;
          font-size: 14px;
          font-family: Source Han Sans CN;
          font-weight: 300;
          color: #333333;
          border-radius: 35px;
          background-color: rgba(0, 0, 0, 0);
          padding: 0;
        }
      }
    }
  }
  .c_content {
    padding: 0;
    .c_title {
      font-size: 28px;
      font-weight: 500;
      position: relative;
      top: 40px;
      margin: 0;
      z-index: 10;
    }
    .item1 {
      display: none;
    }
    .item2 {
      display: block;
      margin: 30px 20px;
      padding-bottom: 40px;
      .swiper-slide {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 110px;
        height: 424px;
        .item2-text-box {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 10px;
          position: relative;
          top: -60px;

          .name {
            font-size: 24px;
            font-family: Source Han Sans CN;
            color: #333333;
            font-weight: 500;
            margin: 0;
          }
          .info {
            font-size: 22px;
            font-family: Source Han Sans CN;
            color: #333333;
            font-weight: 500;
            margin: 0;
            margin-top: 30px;
          }
          .more {
            font-size: 16px;
            font-family: Source Han Sans CN;
            color: #333333;
            margin: 0;
          }
        }
      }
      :deep(.swiper-pagination-bullet) {
        width: 21px;
        height: 1px;
        background: #333333;
        border-radius: 0px;
        margin: 0 18px;
      }
      :deep(.swiper-pagination-bullet-active) {
        background: #000;
      }
      .swiper-pagination {
        bottom: 10px;
        width: 100%;
      }
    }
    .c_hexin {
      .technology-swiper {
        display: none;
      }
      .technology-title {
        color: #fff;
      }
      .technology-swiper-mobile {
        display: block;
        width: 100%;
        margin-top: -20px;
        .swiper-slide {
          display: flex;
          flex-direction: column;
          align-items: center;
          height: 480px;
          .text {
            font-size: 20px !important;
            font-family: Source Han Sans CN;
            color: #000;
            text-align: center;
            position: absolute;
            top: 70px;
            margin: 20px 10px;
          }
          .image {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
        :deep(.swiper-pagination-bullet) {
          width: 21px;
          height: 1px;
          background: #333;
          border-radius: 0px;
          margin: 0 18px;
        }
        :deep(.swiper-pagination-bullet-active) {
          background: #fff;
        }
        .swiper-pagination {
          bottom: 20px;
          width: 100%;
        }
      }
    }

    .productCenter {
      display: none;
    }
    .product-moblie {
      display: flex;
      flex-direction: column;
      .c_videobox {
        width: 100%;
        height: 750px;
        margin-top: 23px;
        position: relative;
        .back-img {
          width: 100%;
          filter: brightness(70%);
        }
        .play-img {
          width: 60px;
          height: 60px;
          position: absolute;
          top: 40%;
          left: 0;
          right: 0;
          margin: 0 auto;
        }
        .c_video {
          width: 100%;
          position: absolute;
          top: 20%;
          left: 0;
        }
        #video-close {
          font-size: 40px;
          color: #fff;
          position: absolute;
          top: 54%;
          left: 44%;
        }
      }
      .product-swiper {
        width: 100%;
        margin: 16px 0;
        .swiper-slide {
          width: 243px;
          height: 278px;
          background: #f2f2f2;
          border-radius: 7px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-around;

          .product-box {
            width: 100%;
            height: 177px;
            display: grid;
            place-content: center;
            place-items: center;
            .product-img {
              width: 100%;
            }
          }
          .product-name {
            font-size: 16px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #333333;
            margin: 0;
          }
        }
      }
    }
  }
  .c_shop {
    margin-top: 10px;
    height: auto;
    background: #f2f2f2;
    flex-direction: column;
    align-items: flex-start;
    .c_shopchild {
      margin: 20px 0;
      flex-direction: row;
      align-items: center;
      gap: 20px;

      .c_shopchildimg {
        width: 50px;
        height: 50px;
        margin-bottom: 0px;
      }
      .c_f6 {
        font-size: 18px;
      }
    }
  }
}
</style>
